<template>
	<view class="content">
		<view class="bg">
			<view class="masking">

			</view>
		</view>


		<view class="corporation">
			<view class="corporation_top" @click="navcluster(data.courses.id)">
				<image :src="data.courses.pic_s" mode="aspectFill"></image>
				<view class="text">
					<view class="">
						{{data.courses.title||''}}
					</view>
					<view class="">
						<text style="margin-right: 20upx;">{{data.merchants.user||''}}</text>
						<u-rate :count="5" v-model="scoring" active-color="rgb(249,126,102)" disabled></u-rate> <text
							style="color: rgb(249,126,102);margin-left: 20upx;font-size: 28upx;font-weight: 900;">{{scoring}}</text>
					</view>
				</view>
			</view>
			<view class="" style="color: rgb(229,104,13);padding: 0 50upx; font-weight: 900;">
				<text style="font-size: 36upx;">￥</text><text
					style="font-size: 48upx;margin-right: 20upx;">{{data.courses.price_b||''}}</text><text
					style="color: #484848;font-weight: 100;font-size: 24upx;">价值￥{{data.courses.price||''}}</text>
			</view>
			<view class="address">
				<view class="address_text" @click="goMap()">
					<view class="">
						{{data.merchants.add||''}}
					</view>
					<view class="">
						距你{{data.merchants.juli>1000?data.merchants.juli/1000:data.merchants.juli}}{{data.merchants.juli>1000?'km':'m'}}
					</view>
				</view>
				<view class="address_icon">
					<view class="" @click="goMap()">
						<u-icon name="map-fill" size="56"></u-icon>
					</view>
					<view class="" @click="dialPhone()">
						<u-icon name="phone-fill" size="56"></u-icon>
					</view>

				</view>
			</view>
		</view>

		<view class="card">
			<view class="overTime">
				过期时间：<u-count-down :timestamp="data.countdown" font-size="26"></u-count-down>
			</view>
			<view class="_schedule">
				{{data.courses.progres||0}}%
				<!-- <u-count-to  :end-val="data.courses.progres" duration="10000" font-size="86" bold></u-count-to>%	 -->
			</view>
			<view class="">
				<u-line-progress striped-active striped height="22" activeColor="rgb(250,48,86)"
					:percent="data.courses.progres">
				</u-line-progress>
			</view>
			<view class="text">
				以砍价<text style="color: rgb(229,104,13)">{{money}}</text>元，差{{distanceMoney}}%
			</view>

			<button open-type="share" class="btn">{{data.courses.progres>85?'即将成功，邀请好友助力':'邀请好友助力'}}</button>


		</view>

		<view class="benefactor">
			<view class="benefactorItem" v-for="(item) in data.hagg_list">
				<image :src="item.user.pic" mode=""></image>
				<view class="">
					砍￥{{item.price}}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 5,
				timestamp: 86400,
				list: ['14.2', '1 2.2', '0.6'],
				order_id: '',
				data: {
					courses: {}
				},
				money: 0,
				scoring: 5
			}
		},
		computed: {
			distanceMoney() {
				return (100 - this.data.courses.progres).toFixed(2)
			}
		},
		onLoad(e) {
			console.log(e)
			this.order_id = e.order_id
			this.newData()
		},
		methods: {
			newData() {
				let location = uni.getStorageSync('location');
				let data = {
					order_id: this.order_id,
					longitude: location.lng||'',
					latitude: location.lat||''
				}
				this.$myRuquest('home/user/haggling_check', data, 'POST').then(res => {
					this.data = res.data

					this.scoring = this.data.courses.scoring.toFixed(1)
					this.data.hagg_list.forEach(item => {
						
						this.money += item.price
						console.log(this.money)
					})

					this.data.merchants.juli = parseInt(this.data.merchants.juli)
				})
			},
			dialPhone() {
				uni.makePhoneCall({
					phoneNumber: this.data.merchants.service_tel
				});
			},
			goMap() {
				let that = this
				uni.openLocation({
					latitude: +that.data.merchants.add_latitude,
					longitude: +that.data.merchants.add_longitude,
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			navcluster(id) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${id}`
				});
			},
			onPullDownRefresh() {


				this.newData()
				setTimeout(() => uni.stopPullDownRefresh(), 2000)
			},
			onShareAppMessage() {
				return {
					title: '忙了一天累了吧？求帮我砍一刀',
					path: '/pages/organizationDetails/bargain/help?order_id=' + this.order_id
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bg {
		width: 100vw;
		height: calc(100vh - 300upx);
		position: fixed;
		top: 300upx;
		z-index: -2;
		background: linear-gradient(to bottom right, rgb(252, 101, 114), rgb(253, 145, 121));
	}

	.corporation {
		padding-bottom: 200upx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0));

		.corporation_top {
			display: flex;
			padding: 30upx 50upx;
			padding-bottom: 20upx;

			image {
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;
				border-radius: 8upx;
			}

			.text {
				view:nth-child(1) {
					margin-bottom: 18upx;
					font-size: 36upx;
					font-weight: 900;

				}

				view:nth-child(2) {
					font-size: 24upx;
					color: #003c7c;
				}
			}
		}

	}

	.address {
		display: flex;
		padding-left: 45upx;
		font-size: 26upx;
		margin-top: 10upx;

		.address_text {
			flex: 3;

			view:nth-child(2) {
				color: rgb(249, 126, 102);
			}
		}

		.address_icon {
			flex: 1;
			display: flex;
			color: rgb(249, 126, 102);
			text-align: left;

			view {
				flex: 1;
			}
		}
	}

	.card {
		width: calc(100% - 60upx);

		box-shadow: 0 0 10upx #fff;
		margin: 0 auto;
		margin-top: -100upx;
		border-radius: 24upx;
		background-color: #fff;
		padding: 30upx;

		.overTime {
			font-size: 26upx;
			color: #5c5e62;
		}

		._schedule {

			margin: 20upx;
			font-size: 86upx;
			font-weight: 900;
			text-align: center;
			background-image: linear-gradient(135deg, rgb(251, 126, 87), rgb(254, 28, 77));
			-webkit-background-clip: text;
			color: transparent;
		}

		.text {
			font-size: 36upx;
			font-weight: 900;
			text-align: center;
			margin: 20upx 0;
		}

		.btn {
			font-size: 36upx;
			font-weight: 900;
			text-align: center;
			width: 440upx;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
			border-radius: 100upx;
			margin: 20upx auto;
			margin-top: 60upx;
		}
	}

	.benefactor {
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 15upx;

		.benefactorItem {
			height: 70upx;
			line-height: 70upx;
			display: flex;
			background-color: rgba(255, 255, 255, .3);
			border-radius: 70upx;
			color: #fff;
			font-weight: 900;
			font-size: 28upx;
			padding-right: 20upx;
			margin: 20upx 15upx;

			image {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				margin-right: 10upx;
			}
		}
	}
</style>
